<template>
  <div class="chat">
    <Nav></Nav>
    <!-- <Main :friend="friend" ref="mainRef"></Main> -->
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
    <!-- 没点击好友时显示图片 -->
    <div class="none" v-if="$route.path.includes('chat') && !$route.params.id">
    </div>
  </div>
</template>

<script setup>
import Nav from './component/Nav.vue'

</script>

<style lang="less" scoped>
.chat {
  // width: 900px;
  width: 850px;
  height: 598px;
  background-color: #fff;
  margin: auto auto;
  // margin-left: 50px;
  display: flex;
  box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #e1e1e1;
  // border-left: none;
  box-shadow: 0px 0px 12px rgba(0, 0, 0, 0.12);;
  .none {
    user-select: none;
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
    background-image: url('~@/assets/svg/chat.svg');
    background-repeat: no-repeat;
    background-position: center;
    img {
      width: 100px;
    }
  }
}
</style>
